<template>
<div class="firstCoupon">
  <div class="firstCoupon-box" v-for="item of list" :key="item.id">
    <div class="coupon-price">
      <em>￥</em>
      <b> {{item.price}}</b>
    </div>
    <div class="coupon-range">
       {{item.range}}
    </div>
    <div class="coupon-btu">
    <button> {{item.btu}}</button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "FirstCoupon",
  data(){
    return{
      list:[
        {id:'001',price:'5',range:'满99元用',btu:'立即领取'},
        {id:'002',price:'10',range:'满158元用',btu:'立即领取'},
        {id:'003',price:'30',range:'满258元用',btu:'立即领取'},
        {id:'004',price:'100',range:'满600元用',btu:'立即领取'}
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.firstCoupon{
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .firstCoupon-box{
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .coupon-price em{
      font:700 12px Arial;
      vertical-align: top;
    }
    .coupon-price b{
      //font:700 10px Arial;
    }
    .coupon-price p{
      margin-top: 10px;
    }
    .coupon-btu button{
      background: #32AAA9;
      border-radius: 15px;

    }
  }
}

</style>